import '@src/Popup.scoped.less';
import MButton from './components/m-button/m-button';
import MInput from './components/m-input/m-input';
import useModel from '@extension/shared/hooks/use-model';

function App() {
  const { modelValue, onChange } = useModel('');
  const search = () => {
    const value = modelValue.trim() || '猴国吴';
    chrome.tabs.create({
      url: `https://www.google.com/search?q=${value}`,
    });
    chrome.tabs.create({
      url: `https://www.baidu.com/s?wd=${value}`,
    });
    chrome.tabs.create({
      url: `https://cn.bing.com/search?q=${value}`,
    });
    // chrome.tabs.create({
    //   url: 'https://github.com/search?q=猴国吴',
    // });
  };
  return (
    <div className="app-container">
      <div className="search-container">
        <MInput title="猴国吴是一只吗喽哇~" value={modelValue} onChange={onChange} />
        <MButton onClick={search}>一键猴搜索</MButton>
      </div>
    </div>
  );
}

export default App;
